<template>
  <TextSetting class="fa-number-setting" :data="data" :disabled="disabled" show-placeholder>
    <ElFormItem prop="numberFixed" label="格式要求">
      <div>
        <ElCheckbox v-model="data.numberFixedLimit" size="mini" :disabled="disabled">固定小数位</ElCheckbox>

        <template v-if="data.numberFixedLimit">
          <ElInputNumber
            class="number-fixed"
            v-model="data.numberFixed"
            size="mini"
            controls-position="right"
            :min="0"
            :max="10"
            :disabled="disabled"
            @blur="data.numberFixed === undefined && (data.numberFixed = 2)"
          />
          位
        </template>
      </div>

      <div>
        <ElCheckbox v-model="data.thousands" size="mini" :disabled="disabled">显示千分位</ElCheckbox>
      </div>
    </ElFormItem>

    <ElFormItem prop="value" label="默认数字">
      <ElInput
        class="el-input__limit-clearable"
        v-model.trim="data.value"
        :disabled="disabled"
        :maxlength="data.text.maxLength"
        placeholder="请输入数字"
        @input="filter"
        @focus="filter"
        @blur="format"
        show-word-limit
        clearable
      />
    </ElFormItem>
  </TextSetting>
</template>

<script lang="ts">
import { defineComponent, toRef, watch } from 'vue'
import { Widget } from '@/models'
import useNumberInput from './useNumberInput'
import TextSetting from '../input/TextSetting.vue'

export default defineComponent({
  name: 'FaNumberSetting',

  components: { TextSetting },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    const formatter = useNumberInput(toRef(props, 'data'))

    /** 格式改变后更新值 */
    watch(
      [() => props.data.numberFixed, () => props.data.numberFixedLimit, () => props.data.thousands],
      formatter.format
    )

    return formatter
  }
})
</script>

<style lang="scss">
.fa-number-setting {
  font-size: 12px;

  .number-fixed {
    width: 70px;
    margin: 0 8px;
  }
}
</style>
